{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">
    <style>
        .data-menu{
            padding: 5px 15px;
            display: flex;
            height: 33px;
            align-items: center;
        }
        .data-menu li a{
            padding: 5px 10px;
            cursor: pointer;
            color: #fff;
        }

        .data-menu li .data-active{
            background-color: #fff;
            color: #000000;
            border-radius: 4px;

        }
    </style>
</head>
<body id="index">
<div id="nav-placeholder">
    <nav style="width: 220px;height: 100%;color: #fff; background-color: RGBA(33,37,41,var(--bs-bg-opacity,1))!important">
        <div class="logo">
            <div class="logo-image">
                <img src="{% static 'images/logo.gif' %}"/>
            </div>
            <div class="logo-title"></div>
        </div>
        <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width: 220px">
            {% if "首页" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="home"><a href="/home/?userId={{user.userId}}">销售数据</a></li>
            {% endif %}
            {% if "用户管理" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="users"><a href="/users/?userId={{user.userId}}">用户管理</a>
            </li>
            {% endif %}
            {% if "后台管理" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="role"><a href="/admin/?userId={{user.userId}}" target="_blank">后台管理</a>
            </li>
            {% endif %}
            <li class="layui-nav-item menu-item" data-page="center"><a
                    href="/center/?userId={{user.userId}}">用户中心</a></li>
            <li class="layui-nav-item menu-item layui-this" data-page="fx"><a
                    href="/fx/?userId={{user.userId}}">数据分析</a></li>
        </ul>
    </nav>
</div>
<div class="content" style="padding: 0">
    <div id="header-placeholder" style="background-color: #fff;">
        <div class="header-menu">
            <div style=" padding: 10px">
                <i class="layui-icon layui-icon-home" style="margin-right: 10px"></i> 首页
            </div>
            <div class="user-info" style="display: flex;align-items: center">
                <dvi id="userinfo">
                    {{ user.userName }}
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                    <div id="drop-menu" style="display: none">
                        <ul>
                            <li><a href="/login/">退出登录</a></li>
                            <li><a href="/center/?userId={{user.userId}}">个人中心</a></li>
                        </ul>
                    </div>
                </dvi>
            </div>
        </div>
        <div class="header-tab" style="border-top: 1px solid #dedede">
            <div class="breadcrumb" style="padding: 10px">
        <span class="layui-breadcrumb" lay-separator="|">
          <a href="/fx/?userId={{user.userId}}"><i class="layui-icon layui-icon-return" style="margin-right: 10px"></i>BACK</a>
          <a><cite>数据分析</cite></a>
        </span>
            </div>
        </div>
    </div>
    <div id="main-placeholder" style="background-color: #fff;margin-top: 10px;padding: 10px">
        <div id="data-menus">
            <ul class="layui-bg-cyan data-menu">
                <li style=""><a href="/fx/?userId={{user.userId}}&op=one">数量分析</a></li>
                <li style=""><a href="/fx/?userId={{user.userId}}&op=two">畅销和滞销产品</a></li>
                <li style=""><a class="data-active" href="/fx/?userId={{user.userId}}&op=three">未来7天销售数据预测</a></li>
            </ul>
        </div>
        <br>
         <div class="data-charts">
            <div id="yc" style="height: 600px;"></div>
        </div>
    </div>
    <div id="footer-placeholder"></div>
</div>

</body>
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>


<script>
  function onDelete(rowId){
    layer.confirm('确认删除此用户？', {
      btn: ['删除', '取消'] //可以无限个按钮
    }, function(index, layero){
      location.href='/userDel/?userId={{ user.userId }}&ID='+rowId;
    }, function(index){
      //按钮【按钮二】的回调
    });
  }

  // 未来7天销售数据预测
  var myChart = echarts.init(document.getElementById('yc'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: 'Distribution of Electricity',
    subtext: 'Fake Data'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // prettier-ignore
    data: JSON.parse('{{ data.dateList|safe }}')
    },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    },
    axisPointer: {
      snap: true
    }
  },

  series: [
    {
      name: 'Electricity',
      type: 'line',
      smooth: true,
      // prettier-ignore
      data: JSON.parse('{{ data.saleList|safe }}'),
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              xAxis: '{{ data.startX }}'
            },
            {
              xAxis: '{{ data.endX }}'
            }
          ]
        ]
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);


  let existMenu = localStorage.getItem('menus');
  let existMenus = existMenu ? JSON.parse(existMenu): [];
  let currentPage = 'home';
  let href = location.href.split('/')
  if(href.length >= 4){
    currentPage = href[4];
    currentPage = currentPage.slice(0,-5)
    console.log(currentPage)
  }

</script>
</html>